<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<head>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-store" />
    <meta http-equiv="Expires" content="0" />
    <meta charset="utf-8" />
    <title>Spring Security Example </title>
    <link href="/css/login.css" rel="stylesheet" type="text/css" />
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="/css/font-awesome-ie7.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/js/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="/js/jquery.cookie.js"></script>
</head>
<script type="text/javascript">
    function login(){
        var username=$("#username").val();
        var password=$("#pwd").val();
        alert(username);
        alert(password);
        if(username==""){
            alert("请输入帐号");
            return;
        }
        if(password==""){
            alert("请输入密码");
            return;
        }
        $.ajax({
            type:"post",
            url:"./login",
            dataType:"text",
            data:{
                "username":username,
                "password":password
            },
            success : function(msg) {
                var data=JSON.parse(msg);
                if(data.status=="false"){
                    alert("登录失败，请检查帐号或密码是否正确");
                }else if(data.success=="true"){
                    self.location=data.url;
                }
            },
            erro : function() {
                alert("服务器访问异常");
            }
        });
    }
</script>
<body>
<!-- <div th:if="${param.error}">
Invalid username and password.
</div>
<div th:if="${param.logout}">
You have been logged out.
</div> -->
<!-- <form th:action="@{/login}" method="post">
<div><label> User Name : <input type="text" name="username"/> </label></div>
<div><label> Password: <input type="password" name="password"/> </label></div>
<div><input type="submit" value="Sign In"/></div>
<input type="checkbox" name="remember-me" value="true" th:checked="checked"/><p>Remember me</p>
</form> -->
<div class="main">
    <div class="loginBox">
        <div class="topTips">
            <label id="l">Login</label>
            <label id="r"><a href="javaScrip:void()">Register</a></label>
        </div>
        <!-- 用户名框 -->
        <div class="inputLine">
            <label class="icon-user icon-2x"></label> <input type="text" name="username" id="username" placeholder="username" />
        </div>

        <!-- 密码框 -->
        <div class="inputLine">
            <label class="icon-lock icon-2x"></label> <input type="password" name="password" id="pwd" placeholder="password" />
        </div>

        <!-- 验证码 -->
        <div class="validateCode">
            <input type="text" name="validateCode" id="validateCode" placeholder="输入验证码" />
            <img onclick="reLoadImg()" src="/" id="validateImg" />
            <!-- <a class="getOther" href="javascript:void(0);" onclick="reloadImg();" title="点击此处可以更新验证码。">更新</a>-->
        </div>

        <!-- 登录按钮 -->
        <div>
            <button type="button" onclick="login()" class="loginButton">Login</button>
        </div>
    </div>
</div>
</body>

</html>